<template>
    <div class="section-7">
        <div class="container">
            <div class="title">
                <h2>辅助配套</h2>
                <p>配套用户端APP+配套互动游戏球+配套软窝（无线充电底座）</p>
            </div>
            <div class="lists lists-1">
                <div class="list middle">
                    <div class="item ban-app">
                        <img src="./images/phone.png" v-show="show" class="phone animated bounceInUp">
                        <div v-show="show" class="round animated bounceInUp" style="animation-delay: 0.5s;">
                            <div class="round-item round-outer"></div>
                            <div class="round-item round-inner"></div>
                            <div class="round-item round-small"></div>
                        </div>
                        <img src="./images/cartoon-bear.png" v-show="show" class="bear animated bounceInUp" style="animation-delay: 0.5s;">
                    </div>
                    <p class="align-center item-bot text">配套用户端APP</p>
                </div>
                <div class="list left">
                    <div v-show="show" class="item animated bounceInLeft">
                        <p>与仿生熊</p>
                        <h6>通讯连接</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInLeft" style="animation-delay: 0.2s;">
                        <p>获取</p>
                        <h6>基本状态信息</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInLeft" style="animation-delay: 0.4s;">
                        <p>承担需要的</p>
                        <h6>人机交互</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInLeft" style="animation-delay: 0.6s;">
                        <p>远程实时</p>
                        <h6>行动操控</h6>
                    </div>
                    <div v-show="show" class="item item-bot animated bounceInUp" style="animation-delay: 1.2s;">
                        <img src="./images/game-wo.png">
                        <p class="text">配套软窝（无线充电底座）</p>
                    </div>
                </div>
                <div class="list right">
                    <div v-show="show" class="item animated bounceInRight" style="animation-delay: 0.2s;">
                        <p>设置</p>
                        <h6>WiFi网络连接</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInRight" style="animation-delay: 0.4s;">
                        <p>协助进行</p>
                        <h5>本地软件</h5>
                        <h6>固件升级</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInRight" style="animation-delay: 0.6s;">
                        <p>实时调取</p>
                        <h5>眼部相机模组</h5>
                        <h6>视频数据</h6>
                    </div>
                    <div v-show="show" class="item item-bot animated bounceInUp" style="animation-delay: 1.2s;">
                        <img src="./images/game-ball.png">
                        <p class="text">配套互动游戏球</p>
                    </div>
                </div>
            </div>
            <div class="lists lists-2">
                <div class="list left">
                    <div v-show="show" class="item animated bounceInLeft">
                        <p>与仿生熊</p>
                        <h6>通讯连接</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInLeft" style="animation-delay: 0.2s;">
                        <p>获取</p>
                        <h6>基本状态信息</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInLeft" style="animation-delay: 0.4s;">
                        <p>承担需要的</p>
                        <h6>人机交互</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInLeft" style="animation-delay: 0.6s;">
                        <p>远程实时</p>
                        <h6>行动操控</h6>
                    </div>
                    <div v-show="show" class="item item-bot animated bounceInUp" style="animation-delay: 1.2s;">
                        <img src="./images/game-wo.png">
                        <p class="text">配套软窝（无线充电底座）</p>
                    </div>
                </div>
                <div class="list right">
                    <div v-show="show" class="item animated bounceInRight" style="animation-delay: 0.2s;">
                        <p>设置</p>
                        <h6>WiFi网络连接</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInRight" style="animation-delay: 0.4s;">
                        <p>协助进行</p>
                        <h5>本地软件</h5>
                        <h6>固件升级</h6>
                    </div>
                    <div v-show="show" class="item animated bounceInRight" style="animation-delay: 0.6s;">
                        <p>实时调取</p>
                        <h5>眼部相机模组</h5>
                        <h6>视频数据</h6>
                    </div>
                    <div v-show="show" class="item item-bot animated bounceInUp" style="animation-delay: 1.2s;">
                        <div><img src="./images/game-ball.png"></div>
                        <p class="text">配套互动游戏球</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'section-7',
	data () {
		return {
            offsetTop:'',
            show:false
		}
    },
    mounted() {
        this.offsetTop = $('.section-7').offset().top
        window.addEventListener('scroll', this.handleScroll)
    },
    methods:{
        handleScroll(){
            if($(window).scrollTop() > this.offsetTop - 300){
                this.show = true;
            }else{
                this.show = false;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.section-7{
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url(./images/section-7.png) no-repeat center center;
    background-size: cover;
    .title{
        padding:75px 0 60px 0;
        text-align: center;
        h2{
            font-size:30px;
            color:#fff;
            line-height:25px;
        }
        p{
            color:#B3B3B3;
            font-size:18px;
            line-height:25px;
            margin-top:30px;
        }
    }
    .lists{
        height:650px;
        position: relative;
        .list{
            color:#fff;
            position: relative;
            p{
                font-size:16px;
                &.text{
                    text-align: center;
                    font-size:14px;
                    color:#E5E5E5;
                    margin-top:40px;
                }
            }
            .item{
                h5{
                    font-weight:bold;
                    font-size:24px;
                    margin-top:5px;
                }
                h6{
                    font-weight:bold;
                    font-size:24px;
                    margin-bottom:50px;
                    margin-top:5px;
                }
            }
            .item-bot{
                position: absolute;
                bottom:0;
            }
            .ban-app{
                text-align: center;
                position: relative;
                img{
                    max-width: 100%;
                    margin:auto;
                }
                .bear{
                    width:130px;
                    height:192px;
                    position: absolute;
                    top:50%;
                    left:50%;
                    margin-top:-96px;
                    margin-left:-65px;
                }
                .round{
                    position: absolute;
                    top:50%;
                    left:50%;
                    margin-left:-117px;
                    width: 234px;
                    height: 140px;
                    .round-item{
                        background:rgba(255,229,0,0.28);
                    }
                }
            }
            &.middle{
                height:100%;
            }
            &.left{
                width:400px;
                height:100%;
                position: absolute;
                left:0;
                top:0;
                padding-left:150px;
            }
            &.right{
                width:400px;
                height:100%;
                position: absolute;
                right:0;
                top:0;
                padding-left:150px;
            }
        }
        &.lists-2{
            margin-top:30px;
            height:480px;
            display: none;
            .list{
                p{
                    font-size:14px;
                }
                h6{
                    margin:5px 0 20px 0 !important;
                }
                &.left{
                    width:50% !important;
                    padding-left:20px !important;
                    .item-bot{
                        left:20px !important;
                        p{
                            text-align: left !important;
                        }
                    }
                }
                &.right{
                    text-align: right;
                    width:50% !important;
                    padding-left:0px !important;
                    padding-right:20px !important;
                    .item-bot{
                        right:20px !important;
                        div{
                            width:100%;
                            height:100px;
                            img{
                                float:right;
                            }
                        }
                        p{
                            text-align: right !important;
                        }
                        
                    }
                }
                .item-bot{
                    width:100%;
                    bottom:30px;
                    img{
                        width:100px;
                    }
                }
            }
        }
    }
}
</style>